<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="---我是有底线的---"
    @load="onLoad"
  >
    <ul class="recommend-box">
      <li v-for="item in goodslist" :key="item.proid">
        <RouterLink :to="'/gooddetail/' + item.proid">
        <img :src="item.img1" /> 
        
        <div class="goods-title">
          <!-- 品牌 -->
          <van-button type="danger" size="mini">{{ item.brand }}</van-button>
          <!-- 商品名 -->
          <span class="proname">
            {{ item.proname }}
          </span>
        </div>
        <p>¥{{ item.originprice }}</p>
      </RouterLink>
      </li>
    </ul>
  </van-list>
</template>
  
  <script>
export default {
  name: "RecommendGoods",
  data() {
    return {
      loading: false,
      finished: false,
      count: 1,
      limitNum: 10,
      goodslist: [],
    };
  },
  created() {
    // this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      this.loading = true;
      this.$http({
        url: "pro/recommendlist",
        params: {
          count: this.count,
          limitNum: this.limitNum,
        },
      }).then((res) => {
        if (res.data.code === "200") {
          // this.goodslist = res.data.data;
          if (res.data.data.length > 0) {
            // console.log(res.data.data);
            this.goodslist.push(...res.data.data);

            this.count++;
            this.loading = false;
          } else {
            this.finished = true;
          }
        }
      });
    },
    onLoad() {
      this.getGoodsList();
    },
  },
};
</script>
  
  <style scoped>
.recommend-box {
  width: 90%;
  column-count: 2;
  column-gap: 20px;
  margin: 0px auto;
}

.recommend-box li {
  break-inside: avoid;
}

.recommend-box img {
  width: 100%;
}

.van-text-ellipsis__action {
  color: black !important;
}

.van-text-ellipsis__action {
  color: black !important;
}
.van-text-ellipsis {
  font-size: 14px;
  color: gray;
}
.goods-title {
  width: 100%;
  /* display: flex; */
  margin: 10px;
}

.brand {
  color: white;
  background-color: red;
  width: 40px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
}

.proname {
  margin-left: 5px;
}
</style>